<script setup lang='ts'>
defineProps<{
  text: string
  type: string
}>()
</script>

<template>
  <span class="state" :class="`state--${type}`">
    {{ text }}
  </span>
</template>

<style lang='less' scoped>
.state {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 12px;
  flex: none;
  &--green {
    background: #e9fbf8;
    border: 1px solid #c1f3ec;
    color: #21d7bb;
  }
  &--yellow {
    background: #fffbe6;
    color: #faad14;
    border: 1px solid #fff1b8;
  }
  &--red {
    background: #fff2f2;
    color: #f74949;
    border: 1px solid #ffe2e2;
  }
  &--blue {
    background: #f2f8ff;
    color: #0075ff;
    border: 1px solid rgba(0, 117, 255, 0.5);
  }
  &--gray {
    background: #f6f7f7;
    color: #b3b8bf;
    border: 1px solid #dcdee1;
  }
  &--purple {
    background: #eee6ff;
    color: #7424ff;
    border: 1px solid #c7baff;
  }
}
</style>
